<template>
  <div v-if="showSidebar" ref="sidebar" class="sidebar" :style="style">
    <!-- 拖拽手柄 -->
    <div class="drag-handler" @mousedown="mousedown">
      <div class="handler"></div>
    </div>
    <div class="core-head">
      <div class="flex">
        <Tabs></Tabs>
      </div>

      <div class="fold-expand" @click="showSidebar = false">
        <div v-if="showSidebar" class="icon-button">
          <img :src="foldPng" width="16" />
        </div>
      </div>
    </div>

    <template v-if="currentTab.title === '网页目录'">
      <div ref="target">
        <div class="flex align-center justify-between">
          <div class="text-666">详细</div>
          <div class="flex core-button" @mouseup.capture="createFolder">
            <div class="text-666">新建</div>
            <div class="icon-button">
              <img :src="plus" width="16" />
            </div>
          </div>
        </div>
        <Tree :data="list"></Tree>
      </div>
    </template>
    <template v-else>
      <Catalogue></Catalogue>
    </template>
    <Contextmenu></Contextmenu>
  </div>
</template>

<script setup lang="ts">
  /*  */
  import { computed, onMounted, ref } from 'vue';
  import { onClickOutside } from '@vueuse/core';
  import foldPng from '@/assets/images/fold.png';
  import plus from '@/assets/images/plus.png';
  import { programData } from '@/store/program/utils';
  import Tree from './tree/Tree.vue';
  import Contextmenu from '../components/contextmenu/Contextmenu.vue';
  import {
    activeId,
    createFolder,
    dragging,
    flexWidth,
    showSidebar,
    selectList,
    currentFolder,
  } from '../bus';
  import Tabs from './tabs/Tabs.vue';
  import Catalogue from './catalogue/Catalogue.vue';
  import { currentTab, selectTabByFlag } from './tabs/bus';

  const list = computed(() => {
    return selectList.value;
  });
  const target = ref();
  const sidebar = ref();

  onClickOutside(target, () => {
    activeId.value = '';
  });
  onClickOutside(sidebar, () => {
    if (window.innerWidth < 750) {
      showSidebar.value = false;
    }
  });
  /* 当进入项目时，自动打开默认的目录 */
  const enterDefaultProgram = () => {
    const data = programData();
    if (data.defaultId) {
      data.programList.forEach((e) => {
        if (e.id === data.defaultId) {
          selectList.value = e.data;
          if (e.data.length > 0) {
            // eslint-disable-next-line prefer-destructuring
            currentFolder.value = e.data[0];
          }
          selectTabByFlag('tree');
        }
      });
    }
  };
  onMounted(() => {
    if (window.innerWidth < 750) {
      showSidebar.value = false;
    }
    enterDefaultProgram();
  });
  let lastMouseX = 0;
  const mousedown = (de: MouseEvent) => {
    lastMouseX = de.x;
    dragging.value = true;
    document.onmousemove = (me: MouseEvent) => {
      const deltaX = me.clientX - lastMouseX;

      if (deltaX > 0 && flexWidth.value >= 500) {
        return;
      }

      flexWidth.value += deltaX;
      lastMouseX = me.x;
    };

    document.onmouseup = () => {
      document.onmousemove = null;
      dragging.value = false;
    };
  };
  const style = computed(() => {
    return {
      width: `${flexWidth.value}px`,
    };
  });
</script>

<style lang="scss" scoped>
  @import './sidebar';
</style>
